import { getAtMeetingPeriodByPage } from '@/services/meeting/atMouthlyMeeting';
import { EllipsisOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import {
  ModalForm,
  ProCard,
  ProFormDateRangePicker,
  ProFormText,
  ProTable,
  QueryFilter,
} from '@ant-design/pro-components';
import { Button, DatePicker, Form, Input, List } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './customer.less';
const Search = Input.Search;
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
export type TableListItem = {
  key: number;
  name: string;
  containers: number;
  creator: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: i,
    name: 'AppName',
    containers: Math.floor(Math.random() * 20),
    creator: creators[Math.floor(Math.random() * creators.length)],
  });
}

const columns: ProColumns<TableListItem>[] = [
  {
    title: 'digitalTeamMeeting',
    dataIndex: 'digitalTeamMeeting',
    render: (_) => <a>{_}</a>,
    search: true,
    filters: [
      {
        text: '姓李的',
        value: '李',
      },
      {
        text: '姓胡的',
        value: '胡',
      },
      {
        text: '子菜单',
        value: '子菜单',
        children: [
          {
            text: '姓陈的',
            value: '陈',
          },
          {
            text: '姓王的',
            value: '王',
          },
        ],
      },
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0,
  },
  {
    title: 'workingCategory',
    dataIndex: 'workingCategory',

    align: 'right',
    sorter: (a, b) => a.containers - b.containers,
  },
  {
    title: 'oneBasicWork',
    dataIndex: 'oneBasicWork',
    valueType: 'select',
    valueEnum: {
      all: { text: '全部' },
      付小小: { text: '付小小' },
      曲丽丽: { text: '曲丽丽' },
      林东东: { text: '林东东' },
      陈帅帅: { text: '陈帅帅' },
      兼某某: { text: '兼某某' },
    },
  },
  {
    title: 'oneBcProfessionalWork',
    dataIndex: 'oneBcProfessionalWork',
  },
  {
    title: 'itPlatformWork',
    dataIndex: 'itPlatformWork',
  },
  {
    title: 'oneBcPromotionWork',
    dataIndex: 'oneBcPromotionWork',
  },
  {
    title: 'others',
    dataIndex: 'others',
  },
  {
    title: 'status',
    dataIndex: 'status',
  },
  {
    title: 'progress',
    dataIndex: 'progress',
  },
  {
    title: 'milestoneDate1',
    dataIndex: 'milestoneDate1',
  },
  {
    title: 'milestoneDate1Remarks',
    dataIndex: 'milestoneDate1Remarks',
  },
  {
    title: 'milestoneDate2',
    dataIndex: 'milestoneDate2',
  },
  {
    title: 'milestoneDate2Remarks',
    dataIndex: 'milestoneDate2Remarks',
  },
  {
    title: 'milestoneDate3',
    dataIndex: 'milestoneDate3',
  },
  {
    title: 'milestoneDate3Remarks',
    dataIndex: 'milestoneDate3Remarks',
  },
  {
    title: 'projectReportOneDriveLink',
    dataIndex: 'projectReportOneDriveLink',
  },
  {
    title: 'projectReportStatus',
    dataIndex: 'projectReportStatus',
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    width: 120,
    render: () => [
      <a key="link">编辑</a>,
      <a key="warn">删除</a>,
      <a key="more">
        <EllipsisOutlined />
      </a>,
    ],
  },
];
const data = [
  { id: 1, title: 'Ant design Title 1' },
  { id: 2, title: 'Ant design Title 2' },
  { id: 3, title: 'Ant design Title 3' },
  { id: 4, title: 'Ant design Title 4' },
  { id: 5, title: 'Ant design Title 4' },
  { id: 6, title: 'Ant design Title 4' },
  { id: 7, title: 'Ant design Title 4' },
  { id: 8, title: 'Ant design Title 4' },
  { id: 9, title: 'Ant design Title 4' },
  { id: 10, title: 'Ant design Title 4' },
  { id: 11, title: 'Ant design Title 4' },
  { id: 12, title: 'Ant design Title 4' },
];

const data2 = [
  {
    key: '1',
    name: '胡斌',
    age: 32,
    address: '南湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园12号',
  },
  {
    key: '3',
    name: '李大嘴',
    age: 32,
    address: '南湖区湖底公园123号',
  },
  {
    key: '4',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '5',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '6',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '7',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '8',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '9',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '10',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '11',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '12',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '13',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
];
function onChange(pagination, filters, sorter) {
  // 点击分页、筛选、排序时触发
  console.log('各类参数是', pagination, filters, sorter);
}

const diTeamMeetingDetail: React.FC<{}> = (props) => {
  const [isBackgroundColorSwitched, setIsBackgroundColorSwitched] = useState(false);
  const toggleBackgroundColor = () => {
    setIsBackgroundColorSwitched(!isBackgroundColorSwitched);
  };

  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [row, setRow] = useState({});
  const [rows, setRows] = useState([]);
  const [form] = Form.useForm();

  const [grid, setGrid] = useState(true);

  const [mainVisit, setMainVisit] = useState(false);
  const [mainTitle, setMainTitle] = useState('新建');

  const mainSubmit = (values) => {
    console.log(values, '---values---');
  };

  const handleSubmit = (values) => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
      ...values,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  };

  useEffect(() => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  }, []);

  return (
    <div className={styles.father}>
      <div className={styles.top}>
        <div className={styles.top1}>
          <QueryFilter preserve={false} span={8} onFinish={handleSubmit}>
            <ProFormText name="meetingName" label="会议名称" />
            <ProFormDateRangePicker name="startDate" label="响应日期" />
            <ProFormDateRangePicker name="endDate" label="创建时间" />
          </QueryFilter>
        </div>
        <div className={styles.top2}>
          <List
            size="small"
            // header={<div>Header</div>}
            // footer={<div>Footer</div>}
            bordered
            dataSource={rows}
            renderItem={(item) => (
              <List.Item
                onClick={() => {
                  setRow(item);
                }}
                style={{ background: item.id === row.id ? '#999' : '' }}
              >
                <span>{item.meetingName}</span> {item.startDate} to {item.endDate}
              </List.Item>
              // <div
              //   style={{ backgroundColor: isBackgroundColorSwitched ? 'lightblue' : 'white' }}
              //   onClick={toggleBackgroundColor}
              // >
              //   {item}
              // </div>
            )}
          />
        </div>
      </div>
      <div className={styles.bottom}>
        <div>
          <ProCard
            tabs={{
              type: 'card',
            }}
            size="small"
          >
            <ProCard.TabPane key="CheckList" tab="CheckList">
              <ProTable<TableListItem>
                columns={columns}
                size="small"
                request={(params, sorter, filter) => {
                  // 表单搜索项会从 params 传入，传递给后端接口。
                  console.log(params, sorter, filter);
                  return Promise.resolve({
                    data: tableListDataSource,
                    success: true,
                  });
                }}
                toolbar={{
                  // search: {
                  //   onSearch: (value) => {
                  //     alert(value);
                  //   },
                  // },
                  // filter: (
                  //   <LightFilter>
                  //     <ProFormDatePicker name="startdate" label="响应日期" />
                  //   </LightFilter>
                  // ),
                  actions: [
                    <Button
                      key="primary"
                      type="primary"
                      onClick={() => {
                        setMainVisit(true);
                      }}
                    >
                      添加
                    </Button>,
                  ],
                  menu: {
                    type: 'tab',
                    items: [
                      {
                        label: 'OneBc Basic',
                        key: 'Basic',
                      },
                      {
                        label: 'OneBc Professional',
                        key: 'Professional',
                      },
                      {
                        label: 'IT Platform Setup',
                        key: 'setUp',
                      },
                      {
                        label: 'OneBc promotion',
                        key: 'promotion',
                      },
                      {
                        label: 'Others',
                        key: 'Others',
                      },
                    ],
                    onChange: (activeKey) => {
                      console.log('activeKey', activeKey);
                    },
                  },
                }}
                rowKey="key"
                search={false}
              />
            </ProCard.TabPane>
            <ProCard.TabPane key="ReviewRecord" tab="ReviewRecord">
              <ProTable<TableListItem>
                columns={columns}
                request={(params, sorter, filter) => {
                  // 表单搜索项会从 params 传入，传递给后端接口。
                  console.log(params, sorter, filter);
                  return Promise.resolve({
                    data: tableListDataSource,
                    success: true,
                  });
                }}
                size="small"
                toolbar={{
                  // search: {
                  //   onSearch: (value) => {
                  //     alert(value);
                  //   },
                  // },
                  // filter: (
                  //   <LightFilter>
                  //     <ProFormDatePicker name="startdate" label="响应日期" />
                  //   </LightFilter>
                  // ),
                  actions: [
                    <Button
                      key="primary"
                      type="primary"
                      onClick={() => {
                        alert('add');
                      }}
                    >
                      添加
                    </Button>,
                  ],
                  menu: {
                    type: 'tab',
                    items: [
                      {
                        label: 'OneBc Basic',
                        key: 'Basic',
                      },
                      {
                        label: 'OneBc Professional',
                        key: 'Professional',
                      },
                      {
                        label: 'IT Platform Setup',
                        key: 'setUp',
                      },
                      {
                        label: 'OneBc promotion',
                        key: 'promotion',
                      },
                      {
                        label: 'Others',
                        key: 'Others',
                      },
                    ],
                    onChange: (activeKey) => {
                      console.log('activeKey', activeKey);
                    },
                  },
                }}
                rowKey="key"
                search={false}
              />
            </ProCard.TabPane>
          </ProCard>
        </div>
      </div>

      <ModalForm
        visible={mainVisit}
        title={mainTitle}
        form={form}
        onFinish={mainSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setMainVisit(false);
          },
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="digitalTeamMeeting"
          label="digitalTeamMeeting"
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请输入编码' }]}
        />
        <ProFormText name="workingCategory" label="workingCategory" colProps={{ md: 12, xl: 12 }} />

        <ProFormText name="oneBasicWork" label="oneBasicWork" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="oneBcProfessionalWork"
          label="oneBcProfessionalWork"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText name="itPlatformWork" label="itPlatformWork" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="oneBcPromotionWork"
          label="oneBcPromotionWork"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText name="others" label="others" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="status" label="status" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="progress" label="progress" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="milestoneDate1" label="milestoneDate1" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="milestoneDate1Remarks"
          label="milestoneDate1Remarks"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText name="milestoneDate2" label="milestoneDate2" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="milestoneDate2Remarks"
          label="milestoneDate2Remarks"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText name="milestoneDate3" label="milestoneDate3" colProps={{ md: 12, xl: 8 }} />
        <ProFormText
          name="milestoneDate3Remarks"
          label="milestoneDate3Remarks"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText
          name="projectReportOneDriveLink"
          label="projectReportOneDriveLink"
          colProps={{ md: 12, xl: 8 }}
        />
        <ProFormText
          name="projectReportStatus"
          label="projectReportStatus"
          colProps={{ md: 12, xl: 8 }}
        />
      </ModalForm>
    </div>
  );
};

export default diTeamMeetingDetail;
